<style lang="scss" scoped src="./index.scss"></style>
<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <ask-breadcrumb-item to="/example" name="ExampleHome"></ask-breadcrumb-item>
                <ask-breadcrumb-item>icon-svg组件</ask-breadcrumb-item>
            </ask-breadcrumb>
        </template>
        <ex-card label="使用示例">
            <ul class="icon-svg__list">
                <icon-item v-for="(item,$i) in exampleIconList" :key="$i" :name="item.name">
                    {{item.html}}
                </icon-item>
            </ul>
        </ex-card>
        <ex-card label="不能修改样式的实线svg">
            <ul class="icon-svg__list">
                <icon-item v-for="(item,$i) in notSolidIconList" :key="$i" :name="item"></icon-item>
            </ul>
        </ex-card>
        <ex-card label="不能修改样式的填充svg">
            <ul class="icon-svg__list">
                <icon-item v-for="(item,$i) in notFillIconList" :key="$i" :name="item"></icon-item>
            </ul>
        </ex-card>
        <ex-card label="能修改样式的实线svg">
            <ul class="icon-svg__list">
                <icon-item v-for="(item,$i) in solidIconList" :key="$i" :name="item"></icon-item>
            </ul>
        </ex-card>
        <ex-card label="能修改样式的填充svg">
            <ul class="icon-svg__list">
                <icon-item v-for="(item,$i) in fillIconList" :key="$i" :name="item"></icon-item>
            </ul>
        </ex-card>
    </page-box>
</template>

<script lang="ts">
import { Component, Mixins } from "vue-property-decorator";
import FormMixin from "@/mixins/form.mixin.base.ts";

import IconItem from "./item.vue";
import ExCard from "../components/ex-card/index.vue";
import Icon from "@/icons";
const iconList: any[] = Icon.getNameList();
const notSolidIconList: any[] = [];
const notFillIconList: any[] = [];
const fillIconList: any[] = [];
const solidIconList: any[] = [];
for (let i = 0; i < iconList.length; i++) {
    const cur = "icon-" + iconList[i];
    if (cur.indexOf("not") !== -1) {
        if (cur.indexOf("not-fill") !== -1) {
            notFillIconList.push(cur);
        } else {
            notSolidIconList.push(cur);
        }
    } else {
        if (cur.indexOf("fill") !== -1) {
            fillIconList.push(cur);
        } else {
            solidIconList.push(cur);
        }
    }
}

@Component({
    components: {
        IconItem,
        ExCard
    }
})
export default class ExampleIconSvg extends Mixins(FormMixin) {
    exampleIconList: any[] = [
        {
            name: "icon-fill-user",
            html: "<icon-svg name=\"icon-fill-user\"></icon-svg>"
        },
        {
            name: "icon-not-fill-text",
            html: "<icon-svg name=\"icon-not-fill-text\"></icon-svg>"
        }
    ];

    notSolidIconList: any[] = notSolidIconList;
    notFillIconList: any[] = notFillIconList;
    fillIconList: any[] = fillIconList;
    solidIconList: any[] = solidIconList;
}
</script>
<style lang="scss">
.home {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.things-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

    .home-calendar {
        width: 4rem;

        .el-calendar-day {
            height: auto;
            text-align: center;
        }
    }

    .home-things {
        border: 1px solid #eee;
        height: 366px;
        width: calc(100% - 4rem);

        .title {
            padding: 10px 20px;

            span {
                display: inline-block;
                margin-right: 20px;
                font-size: 0.14rem;
                line-height: 0.3rem;
                border-bottom: 1px solid transparent;
                cursor: pointer;

                &.active {
                    color: #077BFF;
                    border-color: #077BFF;
                }
            }
        }

        .things-content {
            border-top: 1px solid #eee;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            height: 315px;
            overflow: auto;

            .things-item {
                width: calc(50% - 3px);
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 20px;
                border-bottom: 1px solid #eee;
                border-right: 1px solid #eee;

                &:nth-child(2n) {
                    border-right: 0;
                }

                &:last-child {
                    border-bottom: 0;
                }

                &:nth-last-child(2) {
                    border-bottom: 0;
                }

                p {
                    font-size: 0.14rem;
                    width: calc(100% - 60px);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                button {
                    font-size: 0.14rem;
                }
            }
        }

        .tips {
            font-size: 0.14rem;
            padding-left: 1.5rem;
            margin-top: 0.5rem;
        }
    }
}

.tool-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #eee;
    padding: 20px;
    .item {
        cursor: pointer;
        div {
            width: 0.56rem;
            height: 0.56rem;
            border-radius: 0.1rem;
            i {
                font-size: 0.3rem;
                line-height: 0.56rem;
                text-align: center;
                display: block;
                color: #fff;
            }
        }
        &:nth-child(1) {
            div {
                background: #067BFF;
            }
        }
        &:nth-child(2) {
            div {
                background: #4EB716;
            }
        }
        &:nth-child(3) {
            div {
                background: #FF8809;
            }
        }
        &:nth-child(4) {
            div {
                background: #5694F2;
            }
        }
    }
    p {
        text-align: center;
        font-size: 0.14rem;
        margin: 10px 0 0 0;
    }
}

.table-container {
    border: 1px solid #eee;
    padding: 20px 20px 0;
    margin-top: 20px;
    .table-title {
        font-size: 0.14rem;
        font-weight: 600;
        border-left: 4px solid $primary--color;
        padding-left: 10px;
    }
}
</style>
